<template>
    <div class="banner-carousel">
        <div class="carousel-container" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
            <div class="carousel-track" :style="trackStyle">
                <div v-for="(banner, index) in banners" :key="banner.banner_id" class="carousel-slide"
                    :class="{ active: currentIndex === index }" @click="handleBannerClick(banner)">
                    <img :src="getImageUrl(banner.image_url)" :alt="banner.title" class="banner-image"
                        @error="handleImageError">
                    <div class="banner-overlay">
                        <h3 class="banner-title">{{ banner.title }}</h3>
                        <div class="banner-actions">
                            <el-button type="primary" size="small" @click.stop="handleBannerClick(banner)">
                                查看详情
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 导航点 -->
            <div class="carousel-dots" v-if="banners.length > 1">
                <span v-for="(_, index) in banners" :key="index" class="dot" :class="{ active: currentIndex === index }"
                    @click="goToSlide(index)"></span>
            </div>

            <!-- 导航箭头 -->
            <div class="carousel-arrows" v-if="banners.length > 1">
                <button class="arrow arrow-prev" @click="prevSlide">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </button>
                <button class="arrow arrow-next" @click="nextSlide">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
const props = defineProps({
    banners: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['banner-click'])

const currentIndex = ref(0)
const autoPlayTimer = ref(null)
const isPaused = ref(false)
// 添加图片URL处理函数（与BannerManagement.vue中相同）
const getImageUrl = (url) => {
    if (!url) return ''

    // 如果已经是完整URL，直接返回
    if (url.startsWith('http')) {
        return url
    }

    // 如果是相对路径，添加基础URL
    const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:7001'

    // 处理不同格式的路径
    if (url.startsWith('/')) {
        return `${baseUrl}${url}`
    } else {
        return `${baseUrl}/${url}`
    }
}

// 添加图片加载错误处理
const handleImageError = (event) => {
    console.error('图片加载失败:', event.target.src)
    // 可以设置一个默认图片
    event.target.src = '/default-banner.jpg'
}
const trackStyle = computed(() => {
    return {
        transform: `translateX(-${currentIndex.value * 100}%)`
    }
})

const handleBannerClick = (banner) => {
    emit('banner-click', banner)
}

const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % props.banners.length
}

const prevSlide = () => {
    currentIndex.value = currentIndex.value === 0 ? props.banners.length - 1 : currentIndex.value - 1
}

const goToSlide = (index) => {
    currentIndex.value = index
}

const pauseAutoPlay = () => {
    isPaused.value = true
    if (autoPlayTimer.value) {
        clearInterval(autoPlayTimer.value)
        autoPlayTimer.value = null
    }
}

const resumeAutoPlay = () => {
    isPaused.value = false
    startAutoPlay()
}

const startAutoPlay = () => {
    if (props.banners.length <= 1) return

    autoPlayTimer.value = setInterval(() => {
        if (!isPaused.value) {
            nextSlide()
        }
    }, 5000) // 5秒切换一次
}

onMounted(() => {
    startAutoPlay()
})

onUnmounted(() => {
    if (autoPlayTimer.value) {
        clearInterval(autoPlayTimer.value)
    }
})
</script>

<style scoped>
.arrow .el-icon {
    font-size: 18px;
    font-weight: bold;
}

.banner-carousel {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.carousel-slide:hover {
    transform: scale(1.02);
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.banner-actions {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-slide:hover .banner-actions {
    opacity: 1;
}

.carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #fff;
    transform: scale(1.2);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}

.arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.arrow:hover {
    background-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .banner-carousel {
        height: 200px;
    }

    .banner-title {
        font-size: 16px;
    }

    .banner-overlay {
        padding: 16px;
    }

    .arrow {
        width: 32px;
        height: 32px;
    }
}
</style>